<template>
    <div class="event">
        <div class="exp">
            a: <el-input-number style="width: 200px" v-model="a" :step="1"></el-input-number>
            b: <el-input-number style="width: 200px" v-model="b" :step="1"></el-input-number>
            结果: <span>{{ result }}</span>
        </div>
        <div class="titles">前端代码</div>
        <div class="img-list">
            <img class="img" src="@/assets/code/invoke.png" alt="">
        </div>
        <div class="titles">后端代码</div>
        <div class="img-list">
            <img class="img" src="@/assets/code/code.png" alt="">
            <img class="img" src="@/assets/code/main.png" alt="">
        </div>
        <!-- <el-button type="primary" @click="prevHandler" class="prev-btn">返回</el-button> -->
    </div>
</template>

<script setup lang='ts'>
import { ref, watch } from 'vue'
import { invoke } from '@tauri-apps/api/tauri'

// const openUrl = `https://tauri.app/zh-cn/v1/guides/features/command`;
const a = ref<number>(0);
const b = ref<number>(0);
const result = ref<number>(0);

watch([a, b], () => {
    sum(a.value, b.value)
})
const sum = async (a: number, b: number) => {
    let c: number = await invoke('sum', { a, b })
    console.log(c)
    result.value = c
}

</script>
<style lang='less' scoped>
.event {
    width: 100%;
    height: 100vh;
    background: #fff;
    overflow: hidden;

    .next-btn {
        position: fixed;
        bottom: 20px;
        right: 20px;
    }

    .prev-btn {
        position: fixed;
        top: 20px;
        left: 20px;
    }

    .link-open-window {
        margin-left: 5%;
        font-size: 20px;
        font-weight: 600;
        color: #15bb09;
        cursor: pointer;
        text-decoration: underline;
    }

    .exp {

        font-size: 24px;
        margin-top: 80px;
        margin-left: 5%;
        width: 90%;
    }

    .titles {
        width: 90%;
        font-size: 24px;
        margin: 20px auto;
        font-size: 18px;
        font-weight: 500;
    }

    .img-list {
        font-size: 24px;
        margin: 20px auto;
        display: flex;
        width: 90%;


        .img {
            width: 500px;
            margin-left: 10px;
        }
    }
}
</style>